<script setup lang="ts">
// 基于准备好的dom，初始化echarts实例
import {onMounted} from "vue";
import * as echarts from "echarts";
let myEcharts = echarts;
function initChart() {
  let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
  chart.setOption({
    title: {
      text: "2021年各月份销售量（单位：件）",
      left: "center",
    },
    xAxis: {
      type: "category",
      data: [
        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
      ]
    },
    tooltip: {
      trigger: "axis"
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [
          606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
        ],
        type: "line",
        smooth: true,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "top",
              formatter: "{c}"
            }
          }
        }
      }
    ]
  });
  window.onresize = function () {
    chart.resize();
  };
}

onMounted(() => {
  initChart();
})

</script>

<template>
  <div>
    <div class="echart-box" >
      <div id="myEcharts" ></div>
    </div>
  </div>

</template>

<style scoped>
.echart-box{
  width: 30vw;
  height: 30vw;
  min-width: 200px;
  min-height: 200px;
  border: 3px solid pink;
  margin: 20px auto;
}
#myEcharts {
  width: 100%;
  height: 100%;
}
</style>